<template>
    <div class="img_clazz">
        <div>
            <img :src=ServeUrl+goods.goodsPicturepaths[0].gpPicpath class="img-div"/>
        </div>
        <div class="card-foot">
            <el-rate
                    v-model="value"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}">
            </el-rate>

            <div class="title-div">
                <div class="title_name">{{goods.goodsname}}</div>
                <div class="title_name_b">
                    <span class="title_through">￥{{goods.goodsprice}}</span>
                </div>
                <div class="title_price">￥{{goods.goodsprice * goods.goodsdiscount / 10}}</div>

            </div>
        </div>
    </div>
</template>
<script>
    export default {
        props:['goods'],
        data() {
            return {
                ServeUrl:this.$store.state.beginUrl,
                value: 4,
            }
        },
        mounted() {
            this.getRandom();
        },

        methods:{
            gotoDetails:function(id){
            },
            freshDetails:function (id) {
            },
            getRandom(){
                let number = Math.round(Math.random()*10) / 10 + 4;
                if (number > 5){
                    number = 5;
                }
                this.value = number;
            }
        },
    }
</script>
<style scoped>
    .img_clazz{
        /*box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)*/
        height: 378px;
        width: 270px;
        outline: 1px solid rgba(0, 0, 0, 0.1);
        /*box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);*/
    }
    .img-div{
        width: 272px;
        height: 270px;
    }
    .title{
        cursor:pointer;
    }
    .card-foot{
        /*outline: 1px solid #ff0b00;*/
    }
    .title-div{
        /*outline: 1px solid #5cff72;*/
        cursor: pointer;
    }
    .title_name:hover,.title_price:hover,.title_name_b:hover,.title_price_b:hover{
        color: red;
    }
    .title_name{
        float: left;
        text-align: center;
        color: black;
        font-size: 18px;
        font-weight: bold;
        width: 200px;
        height: 25px;
    }
    .title_price{
        display: inline-block;
        color: black;
        font-size: 18px;
        font-weight: bold;
        width: 110px;
        height: 25px;
        float: left;
    }
    .title_name_b{
        text-align: right;
        float: left;
        color: rgb(155,155,156);
        font-size: 15px;
        font-weight: bold;
        width: 140px;
        height: 24px;
        line-height: 30px;
    }
    .title_price_b{
        display: inline-block;
        color: rgb(155,155,156);
        font-size: 16px;
        font-weight: bold;
        width: 110px;
        height: 24px;
        float: left;
        line-height: 30px;
    }
    .title_through{
        text-decoration: line-through;
    }
    .title_discount{
        display: inline-block;
        height: 30px;
        width: 200px;

        background-color: rgb(245,247,250);
        text-align: left;
        font-size: 16px;
        font-weight: 800;
        float: left;
        text-decoration: none;
        margin-left: 20px;
        color: black;
        /*padding: 4% 10px 20px 10px;*/
    }
    .el-rate{
        padding: 4% 10px 5% 10px;
        background-color: #272727;
        text-align: left;
    }
</style>